/**
  * @description: 订单详情中的订单状态
  * @author: yingying.fan
  * @date: 2019/3/11 10:27
  */
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native'
import { px2dp, LogUtils } from 'rn-xiaobu-utils'
import { appThemeColor } from '../../configs/appconfig'

export default class OrderState extends Component {

  constructor (props) {
    super(props)
    this.state = {}

    this.stateInfo = [
      {
        ICON: require('../../assets/img/orderdetail/order_close.png'),
        STATE: '订单已撤销',
        DESC: ''
      },
      {
        ICON: require('../../assets/img/orderdetail/order_close.png'),
        STATE: '交易已关闭',
        DESC: ''
      },
      {
        ICON: require('../../assets/img/orderdetail/order_w_pay.png'),
        STATE: '等待买家付款',
        DESC: '交易30分钟后自动关闭'
      },
      {
        ICON: require('../../assets/img/orderdetail/order_success.png'),
        STATE: '交易成功',
        DESC: ''
      },
      {
        ICON: require('../../assets/img/orderdetail/order_w_delivery.png'),
        STATE: '等待卖家发货',
        DESC: '正在打包您的快递'
      },
      {
        ICON: require('../../assets/img/orderdetail/order_w_receive.png'),
        STATE: '卖家已发货',
        DESC: '7个工作日后自动确认收货'
      },
      {
        ICON: require('../../assets/img/orderdetail/order_w_comment.png'),
        STATE: '交易成功',
        DESC: '等待您的评价'
      }
    ]
  }

  render () {
    let orderState = this.props.orderInfo.ORDER_STATE
    let index = orderState
    let { ICON, STATE, DESC } = this.stateInfo[index + 3]
    return (
      <View style={styles.wrapper}>
        <View>
          <Text style={styles.stateText}>{STATE}</Text>
          <Text style={styles.stateDesc}>{DESC}</Text>
        </View>
        <Image style={styles.icon} source={ICON}></Image>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: px2dp(169),
    paddingHorizontal: px2dp(30)
  },
  stateText: {
    color: appThemeColor,
    fontSize: px2dp(34)
  },
  stateDesc: {
    color: '#666666',
    fontSize: px2dp(24),
    marginTop: px2dp(10)
  },
  icon: {
    width: px2dp(201),
    height: px2dp(169)
  }
})